<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header class="header">
      <div class="l-content">
        <img class="logcss" src="../assets/images/logo.png" />
        <!-- <el-button plain icon="el-icon-menu" size="mini"></el-button> -->
      </div>
      <div class="r-content">
        <el-dropdown trigger="click" szie="mini">
        <span>
          <img class="user" :src="userImg">
        </span>
        <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>个人中心</el-dropdown-item>
           <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
    </div>

      <!-- <Header></Header> -->
    </el-header>
    <!-- 侧边栏及main部分 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto"> 
        <el-menu
          background-color="#51c4d3"
          text-color="#fff"
          active-text-color="#0eb0c9"
          style="height: 100%"
          class="menu"
          unique-opened
          :collapse="isCollapse"
          router
        >
        <h3 class="h3Class">健康分析预测系统</h3>
      
          <el-submenu index="0">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span class="shouye" @click="push_to_welcome">首页</span>
            </template>
          </el-submenu>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-platform"></i>
              <span>可视化分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Cervical_Cancer_Visualization">宫颈癌</el-menu-item>
              <el-menu-item index="Diabetes_Visualization">糖尿病</el-menu-item>
              <el-menu-item index="Heart_disease_Visualization">心脏病</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>疾病预测</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Cervical_Cancer_Prediction">宫颈癌预测</el-menu-item>
              <el-menu-item index="Diabetes_Prognosis">糖尿病预测</el-menu-item>
              <el-menu-item index="Heart_Disease_Prognosis">心脏病预测</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-upload"></i>
              <span>数据上传</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="Cervical_Cancer_Upload">肿瘤数据上传</el-menu-item>
              <el-menu-item index="Diabetes_Upload">糖尿病数据上传</el-menu-item>
              <el-menu-item index="Heart_Disease_Prognosis">心脏病数据上传</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-upload"></i>
              <span @click="to_yvce">大数据问诊</span>
            </template>
          </el-submenu>
        </el-menu></el-aside
      >
      <el-main width="auto" class="el-main">
        <el-card
          style="width: 100%; height: 100%; "
        >
          <div class="div">
            <router-view></router-view></div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import "../assets/css/index.css";


export default {

  data(){
    return{
      isCollapse:false,
      userImg:require("../assets/images/1.png")
    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    push_to_welcome(){
      this.$router.push("welcome")
    },
    to_yvce(){
      this.$router.push("ill_yvce")
    }
  },
};
</script>

<style scoped lang="less" >
.h3Class{
    color: #fff;
    text-align: center;
    line-height: 48px;
}


.logcss {
  width: 220px;
  height: 150px;
  position: fixed;
  top: -2.5%;
  left: -1%;
}

.header {
  height: 100%;
  justify-content: space-between;
  align-content: center;
  // margin-top: 0;
  display: flex;
  // rgb(151, 245, 252);
  background-color: rgb(181, 245, 250);
    z-index: 999999;
}

.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 260px;
  }
}
.r-content {
  .user {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}


.home-container {
  height: 100%;
  width: 100%;

  /* height: 84px; */
}

// .el-menu-vertical-demo:not(.el-menu--collapse){

// }

.el-menu:not(.el-menu--collapse) {
  width:240px;
  height: 100%;
  min-height: 350px;
  border: none;
  // border: right 0px;


}

 
.el-main {
  background-color: #d3f8ff;
  // width: auto;
}
.div {
  height: 100%;
}
</style>